<template>
	<view class="universal-detail">
		<view class="universal-detail-top">
			<view class="universal-detail-top-time">
				<text class="universal-detail-top-title">处理</text>
			</view>
		</view>

		<view class="univers al-detail-cont">
			<van-form class="universal-detail-form" @submit="onSubmit" label-width="140rpx">
				<van-cell-group>
					<van-field v-model="form.processedInfo" required colon rows="4" autosize type="textarea"
						label="处理情况" show-word-limit maxlength="200" :rules="[{ required: true, message: '请输入处理情况' }]"
						placeholder="请输入处理情况" />
					<van-field name="uploader" required colon label="处理照片"
						:rules="[{ required: true, message: '请上传处理照片' }]">
						<template #input>
							<upload-file accept="image/*" v-model="form.imageUrl"></upload-file>
						</template>
					</van-field>
					<van-field name="uploader" colon label="处理视频">
						<template #input>
							<upload-file accept="video/*" v-model="form.videoUrl"></upload-file>
						</template>
					</van-field>
					<!-- 完成时间 当前时间 -->
					<!-- 审核人 -->
					<van-field v-model="form.auditerName" is-link readonly required name="picker" label="审核人"
						placeholder="请选择审核人" @click="selectShow.user = true"
						:rules="[{ required: true, message: '请选择审核人' }]" />
				</van-cell-group>

				<view class="universal-detail-bottom">
					<van-button class="universal-detail-bottom-button universal-detail-bottom-button-cancel"
						type="default" @click="routeBack">取消</van-button>
					<van-button class="universal-detail-bottom-button universal-detail-bottom-button-sumbit"
						type="primary" native-type="submit">提交</van-button>
				</view>
			</van-form>
		</view>

		<!-- 选择器 审核人 -->
		<picker-search v-model:show="selectShow.user" :columns="usersList" @confirm="onUserConfirm"
			@cancel="selectShow.user = false"></picker-search>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';

	import dayjs from 'dayjs';

	import {
		apiAlertHandle
	} from '@/api/warningHandle';
	import {
		apiUsersList
	} from '@/api/common';

	import store from '@/store'

	const userInfo = store.getters.GET_USER_INFO.sysUser;
	const model = defineModel();
	const emit = defineEmits(['confirm']);
	const form = ref({
		imageUrl: [],
		videoUrl: [],
	});
	const selectShow = ref({
		user: false,
	});
	let usersList = ref([]);

	const onSubmit = () => {
		const param = {
			...form.value,
			processedPic: [...form.value.imageUrl, ...(form.value.videoUrl || [])],
			handler: Number(userInfo.userId),
			finishTime: dayjs().format('YYYY-MM-DD HH:mm:ss'),
		}

		uni.showLoading({
			title: '提交中',
			mask: true
		});

		apiAlertHandle(param).then(res => {
			uni.showToast({
				title: '提交成功',
				icon: 'success',
			});
			emit('confirm');
		}).finally(() => {
			uni.hideLoading();
		})
	}
	// 选择器 审核人
	const onUserConfirm = ({
		selectedValues,
		selectedOptions
	}) => {
		form.value.auditer = selectedOptions[0].value;
		form.value.auditerName = selectedOptions[0].text;
		selectShow.value.user = false;
	}

	// 获取数据 人员
	const getUsersList = () => {
		apiUsersList({
			pageNumber: 1,
			pageSize: 10000,
		}).then(res => {
			usersList.value = res.records.map(n => ({
				text: n.name,
				value: n.userId
			}));
		})
	}
	getUsersList();

	const routeBack = () => {
		uni.navigateBack({
			delta: 1
		});
	}

	form.value.alertId = model.value.alertId || '';
</script>

<style lang="scss" scoped>
	@import '@/assets/universal-detail.scss';
	@import '@/assets/form.scss';
</style>